<template>
  <list class="card">
    <cell class="card_top">
      <image class="card_top_img" src="../src/assets/img/banner_card.jpg" ></image>
    </cell>
    <cell class="card_main">
      <text class="card_icon">&#xe627;</text>
      <input class="card_ipt" type="text" name="" placeholder="卡号" >
    </cell>
    <cell class="card_main">
      <text class="card_icon">&#xe61a;</text>
      <input class="card_ipt" type="password" name="" placeholder="密码" >
    </cell>
    <cell class="card_info">
      <text class="card_icon card_info_icon">&#xe632;</text>
      <text class="card_info_text">线下获得“VIP礼品卡”的会员，请刮开卡片背面的密码涂层，输入激活码，以及卡号，可以马上激活VIP会员资格。</text>
    </cell>
    <cell>
      <button class="card_btn">
        <text class="card_btn_text">确认</text>
      </button>
    </cell>
    <cell class="card_qrcode"  @appear="onappear">
      <image class="card_qrcode_img" src="../src/assets/img/qrcode.jpg" ></image>
      <text class="card_qrcode_text">关注二维码</text>
      <text class="card_qrcode_text">看更多《成功密码》</text>
    </cell>
  </list>
</template>
<style scoped>
  .card{}
  .card_top{}
  .card_top_img{width: 750px;height: 426px;}
  .card_main{flex-direction: row;justify-content: flex-start;align-items: center;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#9E9F9F;height: 125px;width: 750px;}
  .card_icon{font-family: iconfont2;color: #7D7D7D;font-size: 70px;margin:0 10px;}
  .card_ipt{font-size: 40px;}
  .card_info{flex-direction: row;justify-content: space-between;align-items: center;width: 750px;height: 200px;}
  .card_info_icon{width: 60px;font-size: 50px;color: #9D9C9C;}
  .card_info_text{width: 660px;color: #727171;height: 126px;margin-right: 30px;}
  .card_btn{justify-content: center;align-items: center;width: 600px;height: 72px;background-color: #DC7009;margin:0 75px;border-radius: 10px;}
  .card_btn_text{color: #fff;}
  .card_qrcode{width:750px;padding: 50px 0;}
  .card_qrcode_img{width: 240px;height: 240px;border-width:1px;border-style: solid;border-color: rgb(0,0,0);margin-left: 255px;margin-bottom: 15px;}
  .card_qrcode_text{text-align: center;color:#7D7D7D;}
</style>
<script>
  module.exports = {
    beforeCreate: function () {
      var domModule = weex.requireModule("dom");
      domModule.addRule('fontFace', {
        'fontFamily': "iconfont2",
        'src': "url('http://at.alicdn.com/t/font_475407_agvgdhxied0zr529.ttf')"
      });
    }
  }
</script>
